<template>
  <div class="login-container">
    <a-form
      name="custom-validation"
      ref="formRef"
      class="login-body"
      :model="formState"
      :rules="rules"
      v-bind="layout"
    >
    
      <!-- @finish="handleFinish"
      @finishFailed="handleFinishFailed" -->
      <a-form-item has-feedback label="用户名" name="userName">
        <a-input v-model:value="formState.userName"   autocomplete="off" />
      </a-form-item>
      <a-form-item has-feedback label="密码" name="pass">
        <a-input v-model:value="formState.pass" type="password" autocomplete="off" />
      </a-form-item>
    
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit" @click="submit('double')">登录-双菜单</a-button>
       
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
         <a-button   @click="submit('single')">登录-单菜单</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, ref, UnwrapRef ,toRaw} from 'vue';

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { IState } from '@/store'
import { login} from '@/apis/modules/login'
import { menu } from '@/apis/modules/menu'
interface FormState {
  pass: string;
  userName: string;
}
export default defineComponent({
  setup() {
    const formRef = ref();
    const router = useRouter()
    const $sotre = useStore<IState>()
    // const formState: UnwrapRef<FormState> = reactive({
    //   pass: '',
    //   userName: '',
    // });
    const formState  = reactive<FormState>({
      pass: '',
      userName: '',
    });
    let validatePass = async (rule: RuleObject, value: string) => {
      if (value === '') {
        return Promise.reject('请输入密码');
      } else {
        if (formState.userName !== '') {
          formRef.value.validateFields('userName');
        }
        return Promise.resolve();
      }
    };
    let validatePass2 = async (rule: RuleObject, value: string) => {
      if (value === '') {
        return Promise.reject('请输入用户名');
      } else {
        return Promise.resolve();
      }
    };

    const rules = {
      pass: [{ validator: validatePass, trigger: 'change' }],
      userName: [{ validator: validatePass2, trigger: 'change' }],
    };
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const handleFinish = (values: FormState) => {
    //   console.log(values, formState);
      formRef.value.validate().then(()=>{
          console.log(toRaw(formState))
          let data = {
            password: formState.pass,
            userName: formState.userName,
            title:'TS'
          }
         
          login(data).then((res: { success: any;data:any })=>{
              console.log(res)
              if(res.success){
                // initMenu({
                  
                // })
                $sotre.commit('setToken', res.data.token)
                  // $sotre.commit('setUserInfo',data)
                  // router.push({path: 'main'})
              }
          })
      })
    };
    const submit = (type:string) =>{
       formRef.value.validate().then(()=>{
          console.log(toRaw(formState))
          let data = {
            password: formState.pass,
            userName: formState.userName,
            title:'TS'
          }
         
          login(data).then((res: { success: any;data:any })=>{
              console.log(res)
              if(res.success){
                initMenu(type)
                $sotre.commit('setToken', res.data.token)
                $sotre.commit('setUserInfo',data)
                 
              }
          })
      })
    }
    const initMenu = async(type:string) =>{
      let res =  await menu({
        menuType:type
      })
      console.log(res)
      let menuData = {
          menuType:type,
          data:res.data
      }
      $sotre.commit('setMenuType',menuData)
       router.push({path: 'main'})
    }
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    return {
      formState,
      formRef,
      rules,
      layout,
      submit,
      initMenu,
      handleFinishFailed,
      handleFinish,
      resetForm,
    };
  },
});
</script>
<style lang="scss" scoped>
.login-container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(233, 233, 233, 0.3);
    border-radius: 0.4rem;
    border: 1px white solid;
    padding: 0.8rem ;
      .login-body {
          padding: 30px 10px;
          background: rgba(233, 233, 233, 0.6);
          width: 400px;
          border-radius: 0.2rem;
      }
}
</style>